<script setup lang="ts">
import { RouterView, useRoute } from 'vue-router'
import { computed, onMounted } from 'vue'
import TabBar from './components/TabBar.vue'
import { useUserStore } from './stores/user'

const route = useRoute()
const userStore = useUserStore()

// 判断是否显示底部Tab栏
const showTabBar = computed(() => {
  return !route.meta.hideTabBar
})

// 初始化应用
onMounted(async () => {
  console.log('App mounted, 初始化用户状态')
  userStore.initUserInfo()

  // 如果有token，尝试刷新用户信息
  if (userStore.isLoggedIn) {
    try {
      await userStore.refreshUserInfo()
      console.log('用户信息刷新成功')
    } catch (error) {
      console.error('用户信息刷新失败，可能token已过期:', error)
      // Token可能过期，清除用户信息
      userStore.clearUserInfo()
    }
  }
})
</script>

<template>
  <div class="app-container">
    <!-- 主要内容区域 -->
    <div class="content-container" :class="{ 'with-tabbar': showTabBar }">
      <RouterView />
    </div>

    <!-- 底部Tab栏 -->
    <TabBar v-if="showTabBar" />
  </div>
</template>

<style scoped>
.app-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.content-container {
  flex: 1;
  overflow: auto;
  background-color: #f8f8f8;
}

.content-container.with-tabbar {
  padding-bottom: env(safe-area-inset-bottom);
}
</style>
